// 路由列表组件
const RoutesList = {
    template: `
        <div>
            <div class="table-container">
                <div class="table-header">
                    <div class="table-title">
                        <i class="fas fa-sitemap"></i> 路由列表
                    </div>
                    <div>
                        <el-input
                            placeholder="搜索路由..."
                            v-model="searchQuery"
                            prefix-icon="el-icon-search"
                            clearable
                            style="width: 250px; margin-right: 10px;">
                        </el-input>
                        <router-link to="/routes/create">
                            <el-button type="primary" icon="el-icon-plus">创建路由</el-button>
                        </router-link>
                    </div>
                </div>
                
                <el-table
                    :data="filteredRoutes"
                    v-loading="loading"
                    border
                    style="width: 100%">
                    <el-table-column prop="id" label="ID" width="80"></el-table-column>
                    <el-table-column prop="routeId" label="路由ID" width="150"></el-table-column>
                    <el-table-column prop="name" label="名称" width="150"></el-table-column>
                    <el-table-column prop="uri" label="URI" width="200"></el-table-column>
                    <el-table-column label="请求方法" width="150">
                        <template slot-scope="scope">
                            <el-tag v-for="method in parseMethods(scope.row.methods)" :key="method" size="mini" style="margin-right: 5px;">
                                {{ method }}
                            </el-tag>
                            <span v-if="!scope.row.methods">全部</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="状态" width="100">
                        <template slot-scope="scope">
                            <el-tag :type="scope.row.status ? 'success' : 'info'">
                                {{ scope.row.status ? '启用' : '禁用' }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="description" label="描述"></el-table-column>
                    <el-table-column label="操作" width="250" fixed="right">
                        <template slot-scope="scope">
                            <el-button
                                size="mini"
                                @click="viewRoute(scope.row)">
                                查看
                            </el-button>
                            <el-button
                                size="mini"
                                type="primary"
                                @click="editRoute(scope.row)">
                                编辑
                            </el-button>
                            <el-button
                                size="mini"
                                type="danger"
                                @click="deleteRoute(scope.row)">
                                删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                
                <div class="pagination-container">
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="[10, 20, 50, 100]"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="filteredRoutes.length">
                    </el-pagination>
                </div>
            </div>
            
            <!-- 路由详情对话框 -->
            <el-dialog title="路由详情" :visible.sync="dialogVisible" width="70%">
                <el-tabs v-model="activeTab">
                    <el-tab-pane label="基本信息" name="basic">
                        <el-descriptions :column="2" border>
                            <el-descriptions-item label="ID">{{ currentRoute.id }}</el-descriptions-item>
                            <el-descriptions-item label="路由ID">{{ currentRoute.routeId }}</el-descriptions-item>
                            <el-descriptions-item label="名称">{{ currentRoute.name }}</el-descriptions-item>
                            <el-descriptions-item label="URI">{{ currentRoute.uri }}</el-descriptions-item>
                            <el-descriptions-item label="主机名">{{ currentRoute.host || '全部' }}</el-descriptions-item>
                            <el-descriptions-item label="路径">{{ currentRoute.path || '全部' }}</el-descriptions-item>
                            <el-descriptions-item label="请求方法">
                                <el-tag v-for="method in parseMethods(currentRoute.methods)" :key="method" size="mini" style="margin-right: 5px;">
                                    {{ method }}
                                </el-tag>
                                <span v-if="!currentRoute.methods">全部</span>
                            </el-descriptions-item>
                            <el-descriptions-item label="状态">
                                <el-tag :type="currentRoute.status ? 'success' : 'info'">
                                    {{ currentRoute.status ? '启用' : '禁用' }}
                                </el-tag>
                            </el-descriptions-item>
                            <el-descriptions-item label="上游ID">{{ currentRoute.upstreamId || '无' }}</el-descriptions-item>
                            <el-descriptions-item label="服务ID">{{ currentRoute.serviceId || '无' }}</el-descriptions-item>
                            <el-descriptions-item label="描述" :span="2">{{ currentRoute.description }}</el-descriptions-item>
                        </el-descriptions>
                    </el-tab-pane>
                    
                    <el-tab-pane label="插件配置" name="plugins">
                        <div v-if="!currentRoute.plugins" class="empty-plugins">
                            <i class="el-icon-warning"></i>
                            <p>该路由没有配置任何插件</p>
                        </div>
                        <div v-else>
                            <pre>{{ formatJson(currentRoute.plugins) }}</pre>
                        </div>
                    </el-tab-pane>
                </el-tabs>
                
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">关闭</el-button>
                    <el-button type="primary" @click="editRoute(currentRoute)">编辑</el-button>
                </span>
            </el-dialog>
            
            <!-- 删除确认对话框 -->
            <el-dialog
                title="确认删除"
                :visible.sync="deleteDialogVisible"
                width="30%">
                <p>确定要删除路由 "{{ currentRoute.name || currentRoute.routeId }}" 吗？此操作不可恢复。</p>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="deleteDialogVisible = false">取消</el-button>
                    <el-button type="danger" @click="confirmDelete" :loading="deleting">确定</el-button>
                </span>
            </el-dialog>
        </div>
    `,
    data() {
        return {
            routes: [],
            loading: true,
            searchQuery: '',
            currentPage: 1,
            pageSize: 10,
            dialogVisible: false,
            deleteDialogVisible: false,
            deleting: false,
            currentRoute: {},
            activeTab: 'basic'
        };
    },
    computed: {
        filteredRoutes() {
            if (!this.searchQuery) {
                return this.routes;
            }
            
            const query = this.searchQuery.toLowerCase();
            return this.routes.filter(route => {
                return (route.name && route.name.toLowerCase().includes(query)) ||
                    (route.routeId && route.routeId.toLowerCase().includes(query)) ||
                    (route.uri && route.uri.toLowerCase().includes(query)) ||
                    (route.description && route.description.toLowerCase().includes(query));
            });
        }
    },
    created() {
        this.fetchRoutes();
    },
    methods: {
        fetchRoutes() {
            this.loading = true;
            
            axios.get('/routes')
                .then(response => {
                    this.routes = response.data;
                })
                .catch(error => {
                    console.error('获取路由列表失败:', error);
                    this.$message.error('获取路由列表失败: ' + (error.response?.data?.error || error.message));
                })
                .finally(() => {
                    this.loading = false;
                });
        },
        
        parseMethods(methodsStr) {
            if (!methodsStr) return [];
            try {
                return JSON.parse(methodsStr);
            } catch (e) {
                return [];
            }
        },
        
        formatJson(jsonStr) {
            if (!jsonStr) return '';
            try {
                const obj = typeof jsonStr === 'string' ? JSON.parse(jsonStr) : jsonStr;
                return JSON.stringify(obj, null, 2);
            } catch (e) {
                return jsonStr;
            }
        },
        
        viewRoute(route) {
            this.currentRoute = JSON.parse(JSON.stringify(route));
            this.dialogVisible = true;
        },
        
        editRoute(route) {
            this.$router.push(`/routes/edit/${route.id}`);
        },
        
        deleteRoute(route) {
            this.currentRoute = route;
            this.deleteDialogVisible = true;
        },
        
        confirmDelete() {
            this.deleting = true;
            
            axios.delete(`/routes/${this.currentRoute.id}`)
                .then(() => {
                    this.$message.success('路由删除成功');
                    this.deleteDialogVisible = false;
                    this.fetchRoutes();
                })
                .catch(error => {
                    this.$message.error('删除路由失败: ' + (error.response?.data?.error || error.message));
                })
                .finally(() => {
                    this.deleting = false;
                });
        },
        
        handleSizeChange(val) {
            this.pageSize = val;
        },
        
        handleCurrentChange(val) {
            this.currentPage = val;
        }
    }
}; 